<template>
  <el-card
    class="register-body"
    v-loading="loading"
  >
    <div slot="header">
      用户注册
    </div>
      <el-form
        ref="regForm"
        :rules="rules"
        :model="registerForm"
        label-width="80px"
      >
      <div class="left-body">
        <el-form-item
          label="用户名"
          prop="username"
        >
          <el-input
            v-model="registerForm.username"
            placeholder="请输入用户名，必须为合法字符，长度在4-16之间"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="oldpwd"
        >
          <el-input
            show-password
            v-model="registerForm.oldpwd"
            placeholder="请输入密码，必须为合法字符，长度在8-16之间"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="重复密码"
          prop="newpwd"
        >
          <el-input
            show-password
            v-model="registerForm.newpwd"
            placeholder="请再次输入密码，需一致"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="昵称"
          prop="nickname"
        >
          <el-input
            v-model="registerForm.nickname"
            placeholder="昵称可以让别人更好记住你哦"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="registerForm.gender">
            <el-radio label="0">保密</el-radio>
            <el-radio label="1">男</el-radio>
            <el-radio label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="邮箱"
          prop="email"
        >
          <el-input
            v-model="registerForm.email"
            placeholder="邮箱是唯一的找回密码方式"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="电话"
          prop="phone"
        >
          <el-input
            v-model="registerForm.phone"
            placeholder="有时候我们将通过电话联系您"
          ></el-input>
        </el-form-item>
    </div>
    <div class="right-body">
        <el-form-item label="头像">
          <Avatar
            :doUpload="uploadAvatar"
            @returnUrl="getAvatarUrl"
          ></Avatar>
        </el-form-item>
        <el-form-item label="宣言">
          <el-input
            v-model="registerForm.motto"
            placeholder="说点什么展示一下自己吧，50个字以内"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="captcha">
          <img @click="getCaptchaUrl()" class="captcha-img" :src="captchaUrl" alt="验证码"/>
          <el-input
                v-model="registerForm.captcha"
                placeholder="请输入验证码"
              >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit('regForm')"
          >立即注册账号</el-button>
          <el-button>取消</el-button>
        </el-form-item>
    </div>
      </el-form>
  </el-card>
</template>

<script>
import Avatar from '../components/AvatarComponent'
export default {
  components: {
    Avatar
  },
  data () {
    var validateUsername = (rule, value, callback) => {
      var reg = /^\w+$/
      if (!reg.test(value)) {
        callback(new Error('请输入字母、数字或者下划线'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      var reg = /^\w+$/
      if (!reg.test(value)) {
        callback(new Error('请输入字母、数字或者下划线'))
      } else {
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.registerForm.oldpwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    var validateEmail = (rule, value, callback) => {
      var reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
      if (!reg.test(value)) {
        callback(new Error('邮箱不合法'))
      } else {
        callback()
      }
    }
    var validatePhone = (rule, value, callback) => {
      var reg = /^(13[0-9]{9})|(15[0-9][0-9]{8})|(18[0-9][0-9]{8})$/
      if (!reg.test(value)) {
        callback(new Error('电话号码不合法'))
      } else {
        callback()
      }
    }
    var validateCaptcha = (rule, value, callback) => {
      var reg = /^\w{5,5}$/
      if (!reg.test(value)) {
        callback(new Error('验证码不合法'))
      } else {
        callback()
      }
    }
    return {
      // 上传是否结束
      uploadComplete: false,
      loading: false,
      uploadAvatar: false,
      captchaUrl: '',
      registerForm: {
        username: '',
        oldpwd: '',
        newpwd: '',
        nickname: '',
        gender: '0',
        email: '',
        phone: '',
        avatarUrl: '',
        motto: '',
        captcha: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 4, max: 16, message: '长度在4-16个字符之间', trigger: 'blur' },
          { validator: validateUsername, trigger: 'blur' }
        ],
        oldpwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, max: 16, message: '长度在8-16个字符之间', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        newpwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, max: 16, message: '长度在8-16个字符之间', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 1, max: 8, message: '长度在1-8个字符之间', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { validator: validateCaptcha, trigger: 'blur' }
        ]
      }
    }
  },
  created () {
  },
  mounted () {
    this.getGuestToken()
  },
  watch: {
    // 监听是否完成头像上传
    uploadComplete (val) {
      console.log(val)
      if (val) {
        this.registerUser()
      }
    }
  },
  methods: {
    onSubmit (formName) {
      console.log('调用onSubmit')
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 告诉头像组件上传图片
          this.uploadAvatar = true
          this.loading = true
          this.logger.i('onsubmit正常')
        } else {
          this.logger.e('onsubmit错误')
          return false
        }
      })
    },
    getAvatarUrl (val) {
      console.log('调用getAvatarUrl')
      this.registerForm.avatarUrl = val
      this.uploadComplete = true
    },
    async getCaptchaUrl () {
      console.log('调用getCaptchaUrl')
      let data = await this.$http.post('/util/captcha')
      this.captchaUrl = process.env.VUE_APP_APIURL + data.datas[0]
    },
    async getGuestToken () {
      console.log('调用getGuestToken')
      if (!this.$store.getters['getIsLogin']) {
        let data = await this.$http.post('/user/guest/token')
        this.$store.commit('setToken', data.datas[0])
        this.getCaptchaUrl()
      }
    },
    async registerUser () {
      console.log('调用registerUser')
      let params = new URLSearchParams()
      params.append('username', this.registerForm.username)
      params.append('password', this.registerForm.oldpwd)
      params.append('nickname', this.registerForm.nickname)
      params.append('gender', this.registerForm.gender)
      params.append('email', this.registerForm.email)
      params.append('phone', this.registerForm.phone)
      params.append('motto', this.registerForm.motto)
      params.append('avatarUrl', this.registerForm.avatarUrl)
      params.append('captcha', this.registerForm.captcha)
      let registerData = await this.$http.post('/user/register', params)
      if (registerData.code === 10000) {
        this.$message.success(registerData.msg)
        this.$router.push({ name: 'Login' })
      } else {
        this.$message.error(registerData.msg)
        this.uploadAvatar = false
        this.uploadComplete = false
      }
      this.loading = false
    }

  }
}
</script>

<style  scoped>
.register-body {
  width: 80%;
  min-height: 600px;
  margin: auto;
}

.left-body {
  float: left;
  width: 50%;
  min-height: 600px;
}

.right-body {
  float: left;
  width: 50%;
  min-height: 600px;
}
</style>
